<template>
  <view class="template-home tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
      <view id="navbar" class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <!-- <view class="custom-nav__back"></view> -->
        <!-- 搜索框 -->
        <view class="search-sty">
          <u-search bg-color="#fff" placeholder="请输入题库试题文档名称" shape="square" :show-action="false" :animation="false"
            :clearabled="true" v-model="keyword"></u-search>
        </view>
      </view>
    </tn-nav-bar>

    <view class="card-swiper" :circular="true"
      style="background-color: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));" :autoplay="false"
      duration="500" interval="28000" @change="cardSwiper">
      <view v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
      </view>
    </view>
    <view class="indication">
      <block v-for="(item,index) in swiperList" :key="index">
        <view class="spot" :class="cardCur==index?'active':''"></view>
      </block>
    </view>

    <!-- 头部消息-->
    <view class="tn-flex tn-margin-xs tn-padding-top-sm tn-color-white icon-function">
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="img_header">
            <u-image width="20rpx" height="20rpx" src="../../static/images/itemtwo.png"></u-image>
            <text class="text_header">{{completedQuestionCount}}</text>
          </view>
          <view class="tn-text-center">
            <text class="tn-text-ellipsis">已刷题</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="img_header">
            <u-image width="20rpx" height="20rpx" src="../../static/images/itemfour.png"></u-image>
            <text class="text_header">{{correctQuestionCount }}</text>
          </view>
          <view class="tn-text-center">
            <text class="tn-text-ellipsis">答对数</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="img_header">
            <u-image width="20rpx" height="20rpx" src="../../static/images/itemthree.png"></u-image>
            <text class="text_header">{{correctRate}}</text>
            <text>%</text>
          </view>
          <view class="tn-text-center">
            <text class="tn-text-ellipsis">正确率</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
        <button class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-button--clear-style"
          open-type="contact" @click="vibrateShort">
          <view class="img_header">
            <u-image width="20rpx" height="20rpx" src="../../static/images/itemone.png"></u-image>
            <text class="text_header">{{unansweredQuestionCount}}</text>
          </view>
          <view class="tn-text-center">
            <text class="tn-text-ellipsis">未刷题</text>
          </view>
        </button>
      </view>
    </view>
    <view class="tn-notice-bar-sty">
      <tn-notice-bar :volume-icon="false" :list="list" mode="vertical"></tn-notice-bar>
    </view>
    <!-- 公共题库分类学习-->
    <view class="health-shadow tn-margin tn-color-black tn-bg-white"
      style="position: relative;z-index: 1;padding: 20rpx 6rpx;">
      <u-grid :col="3" :border='false'>
        <u-grid-item @click="handleTagClick('1')">
          <view class="item_icon">
            <u-image width="68rpx" height="60rpx" src="../../static/images/item1.png"></u-image>
          </view>
          <view class="grid-text">竞赛学习</view>
        </u-grid-item>
        <u-grid-item @click="handleTagClick('2')">
          <view class="item_icon">
            <u-image width="60rpx" height="60rpx" src="../../static/images/item6.png"></u-image>
          </view>
          <view class="grid-text">专题学习</view>
        </u-grid-item>
        <u-grid-item @click="handleTagClick('3')">
          <view class="item_icon">
            <u-image width="60rpx" height="60rpx" src="../../static/images/item2.png"></u-image>
          </view>
          <view class="grid-text">思想学习</view>
        </u-grid-item>
        <u-grid-item @click="handleTagClick('4')">
          <view class="item_icon">
            <u-image width="60rpx" height="60rpx" src="../../static/images/item3.png"></u-image>
          </view>
          <view class="grid-text">专业学习</view>
        </u-grid-item>
        <u-grid-item @click="handleTagClick('5')">
          <view class="item_icon">
            <u-image width="60rpx" height="60rpx" src="../../static/images/item4.png"></u-image>
          </view>
          <view class="grid-text">安规学习</view>
        </u-grid-item>
        <u-grid-item @click="handleTagClick('6')">
          <view class="item_icon">
            <u-image width="60rpx" height="60rpx" src="../../static/images/item5.png"></u-image>
          </view>
          <view class="grid-text">其他学习</view>
        </u-grid-item>

      </u-grid>
    </view>

    <!-- 我的题库-上传 -->
    <view class="health-shadow tn-margin tn-color-black tn-bg-white">
      <view class="u-card">
        <view class="mypaper_header">
          我的题库
        </view>
        <view class="uploadFiles" @click="uploadFiles">
          <u-image width="40rpx" height="40rpx" src="../../static/images/import.png"></u-image>
          <text class="text_import">上传题库</text>
        </view>
      </view>
      <u-line color="#EBEAEA" />
      <!-- 我的题库 -->
      <view v-if="tag ===1 && personPaperList.length!==0 ">
        <view style="position: relative;z-index: 1;padding: 20rpx 6rpx;" v-for=" item in personPaperList">
          <view class="my-paper" @click="practiceHandle(item)">
            <view class="u-today-card-img">
              <u-image width="70rpx" height="80rpx" src="../../static/images/paperItem.png"></u-image>
            </view>
            <view class="u-today-card-body">
              <view>
                {{item.name}}
              </view>
              <view class="u-today-card">
                <view class="u-today-card-count">
                  题目数：{{item.questionCount}}
                </view>
                <view class="u-today-card-count">
                  上传时间：{{item.createTime}}
                </view>
              </view>
            </view>
            <view class="u-today-card-icon">
              <u-icon name="more-dot-fill" @click.native.stop="editPaperItem(item)" size="35"></u-icon>
            </view>
          </view>
          <br />
          <u-line color="#EBEAEA" />
        </view>
      </view>
      <view class="container_card" v-if="tag ===1 && personPaperList.length===0 ">
        <u-empty text="列表为空" mode="list " icon-size="300rpx"></u-empty>
      </view>
    </view>
    <view class="tn-tabbar-height"></view>

    <u-popup v-model="showPaperItem" mode="bottom" height="800rpx" border-radius="20">
      <view style="position: relative;z-index: 1;padding: 20rpx 6rpx;">
        <view>
          <view class="u-today">
            <view>
              {{paperItemDetails.name}}
            </view>
          </view>
          <view class="u-today-header">
            <view class="u-today-text">
              题目数：{{paperItemDetails.questionCount}}
            </view>
            <view class="u-today-text">
              上传时间：{{paperItemDetails.createTime}}
            </view>
          </view>
        </view>
      </view>
      <u-cell-group>
        <u-cell-item icon="setting-fill" title="置顶题库" @click="pinToTop(paperItemDetails)"></u-cell-item>
        <u-cell-item icon="setting-fill" title="编辑题库名称" @click="editPaperName(paperItemDetails)"></u-cell-item>
        <u-cell-item icon="setting-fill" title="添加试题" @click="appPaper"></u-cell-item>
        <u-cell-item icon="setting-fill" title="删除题库" @click="deletePerson(paperItemDetails.id)"></u-cell-item>
      </u-cell-group>
    </u-popup>
    <!-- 修改名称 -->
    <u-modal :mask-close-able='true' v-model="handleItemName" :show-cancel-button='true' title="修改试题名称"
      @confirm="handleName">
      <view class="slot-content">
        <view class="container_popup_text">
          <u-input ref="inputRef" v-model="handleNamePaperItem" type="text" :border="true" />
        </view>
      </view>
    </u-modal>
    <!-- 添加试题 -->
    <u-modal :mask-close-able='true' v-model="handleAddpaper" :show-cancel-button='true' title="添加试题名称"
      @confirm="handleAddPaperConfirm">
      <view class="slot-content">
        <view class="container_popup_text">
          <u-input ref="inputRef" v-model="paperName" type="text" :border="true" />
        </view>
      </view>
    </u-modal>
    <!-- 删除试题 -->
    <u-modal :mask-close-able='true' v-model="handleDeletepaper" :show-cancel-button='true' title="删除题库"
      @confirm="handleDeleteConfirmPaper">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续删除
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />

  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import {
    getPublicPaperAPI,
    getPersonPaperListAPI,
    indexAPI,
    deletePersonAPI,
    putPersonAPI,
    pinToTopAPI
  } from '@/api/addPaper/addpaper.js'

  export default {
    name: 'Home',
    mixins: [template_page_mixin],
    data() {
      return {
        handleNamePaperItem: '',
        handleDeletepaper: false,
        paperName: '',
        handleAddpaper: false,
        tag: 0,
        handleItemName: false,
        paperItemDetails: '',
        showPaperItem: false,
        personPaperList: [],
        keyword: '',
        list: [
          '关于组织全体成员培训的通知！', '关于组织全体成员培训的通知！', '关于组织全体成员培训的通知！'
        ],
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          title: '免费开源',
          name: '商业合作请联系作者',
          text: '微信：tnkewo',
          url: '../../static/images/bgc.png',
        }],
        curLib: '常考考点背题',
        libs: ['mh_secur_4', 'mh_secur_5'],
        typeL: 'changkao',
        correctQuestionCount: '',
        completedQuestionCount: '',
        correctRate: '',
        unansweredQuestionCount: '',
        deleteId: ''
      }
    },
    onShow() {
      this.getPersonPaperList()
    },
    created() {
      this.getPersonPaperList()
      this.indexList()
    },
    methods: {
      deletePerson(id) {
        this.deleteId = id
        this.handleDeletepaper = true
      },
      async handleDeleteConfirmPaper() {
        await deletePersonAPI(this.deleteId)
          .then((res) => {
            this.$refs.uToast.show({
              title: '删除成功',
              type: 'success',
              icon: false
            })
            this.getPersonPaperList()
          }).catch(() => {

          }).finally(() => {
            this.handleDeletepaper = false
            this.showPaperItem = false
          })
      },
      //仪表盘
      async indexList() {
        await indexAPI().then((res) => {
          this.completedQuestionCount = res.data.completedQuestionCount
          this.correctQuestionCount = res.data.correctQuestionCount
          this.correctRate = parseInt(res.data.correctRate.replace("%", ""));
          this.unansweredQuestionCount = res.data.unansweredQuestionCount
        })
      },
      // 添加试题
      appPaper() {
        this.handleAddpaper = true
        this.paperName = ''
      },
      handleAddPaperConfirm() {
        if (!this.paperName) {
          this.$refs.uToast.show({
            title: '请输入正确的题库名称',
            type: 'error',
            icon: false
          })
          this.handleAddpaper = true
          return
        }
        uni.navigateTo({
          url: '../uploadFIle/androidUpload?nameFile=' + this.paperName,
        })
      },
      // 编辑题库名称
      editPaperName(item) {
        this.$nextTick(() => {
          console.log(this.$refs.inputRef, 'this.$refs.inputRef');
        });
        this.deleteId = item.id
        this.handleItemName = true
      },
      async handleName() {
        const param = {
          id: this.deleteId,
          name: this.handleNamePaperItem,
          privated: true

        }
        await putPersonAPI(param).then((res) => {
          this.$refs.uToast.show({
            title: '修改题库名成功',
            type: 'success',
            icon: false
          })
          this.getPersonPaperList()
        }).finally(() => {
          this.handleItemName = false
          this.showPaperItem = false
        })

      },

      // 置顶
      async pinToTop(item) {
        const param = {
          id: item.id
        }
        await pinToTopAPI(param).then((res) => {
          this.$refs.uToast.show({
            title: '置顶成功',
            type: 'success',
          })
          this.getPersonPaperList()
        })
        this.showPaperItem = false
      },

      //点击个人刷题
      practiceHandle(item) {
        uni.navigateTo({
          url: '../shuatiPaper/shuatiPaper?paperType=person&id=' + item.id,
        })

      },
      editPaperItem(item) {
        this.showPaperItem = true
        this.paperItemDetails = item
      },
      async getPersonPaperList() {
        const param = {
          pageNo: 1,
          pageSize: 10
        }
        await getPersonPaperListAPI(param).then((res) => {
          this.personPaperList = res.data.list
          this.tag = 1
        })
      },
      // 点击分类公共题库
      handleTagClick(item) {
        this.categoryId = item
        uni.navigateTo({
          url: '../categorizationPaper/categorizationPaper?paperType=public&categoryId=' + this.categoryId,
        })
      },

      //最近错题
      recentlyHandle(type) {
        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: async (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type
              },
              apifunc: {
                examList: this.getExamList
              },
              title: '常考考点背题',
              typeL: this.typeL
            })
          }
        })
      },
      //共享题库
      shareHandle() {
        uni.navigateTo({
          url: '../shareSubject/shareSubject'
        })
      },
      //极速背题
      speedHandle() {
        uni.navigateTo({
          url: '../recitePaper/recitePaper'
        })
      },
      //错题集
      errorHandle() {
        uni.navigateTo({
          url: '../aiSubject/commonMistakes/commonMistakes',
        })
      },
      // 上传文件
      uploadFiles() {
        this.handleAddpaper = true
      },

      aiStudyList() {
        uni.navigateTo({
          url: '../aiStudy/aiStudy'
        })
      },
      aiHandle() {
        uni.navigateTo({
          url: '../aiSubject/aiSubject'
        })
      },
      //背题
      memorizeHandle() {
        uni.navigateTo({
          url: '/pages/memorize/memorize'
        });
      },
      examHandle() {
        uni.navigateTo({
          url: '/pages/goExam/goExam'
        });
      },
      // 短震动
      vibrateShort(e) {
        wx.vibrateShort();
      },

      // 跳转
      tn(e) {
        wx.vibrateShort();
        uni.navigateTo({
          url: e,
        });
      },

      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // resume
      resume(e) {
        this.cardCur2 = e.detail.current
      },
      getExamList(params = {}) {
        return new Promise((resolve, reject) => {
          uni.request({
            url: 'https://fc-mp-80740b3d-3f1f-452a-9661-5ab000526a80.next.bspapp.com/api/application/examList',
            data: params,
            method: 'POST',
            success: (res) => {


              resolve(res.data)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "uview-ui/index.scss";

  .search-sty {
    width: 100%;
    margin: 20rpx;
    opacity: 0.8;

  }

  .uploadFiles {
    display: flex;
    align-items: center;
  }

  .text_import {
    color: #607BFA;
    margin-left: 10rpx;
  }

  .img_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .mypaper_header {
    font-weight: 700;
  }

  .text_header {
    font-size: 60rpx;
    margin-left: 5rpx;
  }

  .template-home {
    max-height: 100vh;
    background-image: linear-gradient(to bottom, #BFD9FF, #F8F9FA)
  }

  /* 底部安全边距 start*/
  .tn-tabbar-height {
    min-height: 120rpx;
    height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }

  /* 没有上线*/
  .punch-no {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: 0.4;
  }

  .icon-function {
    position: relative;
    z-index: 1;
    margin: 30rpx 5rpx;
    padding: 20rpx;
    margin-top: -400rpx;
    background-image: url('../../static/images/header.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

  }

  /* 轮播视觉差 start */
  .card-swiper {
    height: 600rpx !important;
    background-image: url('../../static/images/bgcImg.png');
    background-repeat: no-repeat;
    background-size: 800rpx 350rpx;
  }

  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    // padding: 0rpx 30rpx 90rpx 30rpx;
    overflow: initial;
  }

  .card-swiper uni-swiper-item {
    padding: 0 !important;
  }

  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
  }

  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
  }

  .image-banner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-banner image {
    width: 100%;
    height: 100%;
  }

  /* 轮播指示点 start*/
  .indication {
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }

  .spot {
    background-color: #FFFFFF;
    opacity: 0.6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -60rpx;
    margin: 0 8rpx !important;
    position: relative;
  }

  .spot.active {
    opacity: 1;
    width: 30rpx;
    background-color: #FFFFFF;
  }

  /* 简历推荐 start */
  .card-swiper2 {
    height: 420rpx !important;
    overflow: hidden;
  }

  .card-swiper2 swiper-item {
    width: 680rpx !important;
    left: 30rpx;
    box-sizing: border-box;
    overflow: initial;
    padding: 0 0rpx 40rpx 0;
  }

  .card-swiper2 swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    // transform: scale(1);
    // transition: transform 0.2s ease-out 0s;
  }

  .card-swiper2 swiper-item.cur .swiper-item {
    // transform: scale(1);
  }

  .card-swiper2 swiper-item .swiper-item2 {
    width: 100%;
    display: block;
    height: 50%;
    border-radius: 50%;
    transform: translate(480rpx, -300rpx) scale(0.9);
    transition: transform 0.3s ease-out 0s;
  }

  .card-swiper2 swiper-item.cur .swiper-item2 {
    transform: translate(510rpx, -320rpx) scale(0.9);
  }

  .card-swiper2 swiper-item .swiper-item-text {
    width: 100%;
    display: block;
    height: 100%;
    border-radius: 10rpx;
    transform: translate(20rpx, -420rpx) scale(0.8);
    transition: transform 0.6s ease-out 0s;
    overflow: hidden;
  }

  .card-swiper2 swiper-item.cur .swiper-item-text {
    transform: translate(20rpx, -450rpx) scale(0.9);
  }



  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow {
    background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
    position: fixed;
    bottom: 0;
    height: 450rpx;
    width: 100vw;
    z-index: -1;
  }

  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        // border-radius: 50%;
        margin-bottom: 0rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }
    }
  }

  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }

  /* 图标容器9 start */
  .icon9 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 80rpx;
        height: 80rpx;
        font-size: 50rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
        }
      }
    }
  }


  /* 阴影 start*/
  .health-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;

    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }

    &__search {
      flex-basis: 80%;
      width: 100%;
      height: 100%;

      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 0 60rpx;
        font-size: 24rpx;
      }

      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }

      &__text {
        color: #FFFFFF;
      }
    }
  }

  .logo-image {
    width: 60rpx;
    height: 60rpx;
    position: relative;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 50%;
  }

  /* 自定义导航栏内容 end */


  /* 热门图片 start*/
  .image-tuniao1 {
    padding: 164rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }

  .image-tuniao2 {
    padding: 75rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }

  .image-tuniao3 {
    padding: 90rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }

  .image-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }

  /* 胶囊banner*/
  .image-capsule {
    padding: 100rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }

  .image-piccapsule {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 20rpx 20rpx 0 0;
  }


  /* 业务展示 start */
  .tn-info {

    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }

    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 40rpx 30rpx;
      border-radius: 15rpx;


      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
      }

      &__left {

        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          font-size: 40rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;

          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }

        &__content {
          font-size: 25rpx;

          &--data {
            color: rgba(255, 255, 255, 0.5);
            margin-top: 5rpx;
            // font-weight: bold;
          }
        }
      }

      &__right {
        &--icon {
          position: absolute;
          right: 0rpx;
          top: 50rpx;
          font-size: 100rpx;
          width: 108rpx;
          height: 108rpx;
          text-align: center;
          line-height: 60rpx;
          opacity: 0.15;
        }
      }
    }
  }

  /* 业务展示 end */
  .u-card-wrap {
    background-color: #fff;
    padding: 1px;
  }

  .u-body-item {
    font-size: 32rpx;
    color: #333;
    padding: 20rpx 10rpx;
  }

  .u-body-item image {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-left: 12rpx;
  }

  .my-paper {
    display: flex;
    justify-content: flex-start;
    padding: 0 25rpx;
    color: #333;

    .u-today-card-img {
      width: 80rpx;
      margin-right: 20rpx;
    }

    .u-today-card-body {
      flex: 1;
    }

    .u-today-card {
      display: flex;
      justify-content: space-between;

      .u-today-card-count {
        margin-top: 10rpx;
        font-size: 20rpx;
        color: #9F9F9F;
      }
    }

    .u-today-card-icon {
      width: 40rpx;
    }
  }


  .u-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 20rpx;
    padding: 10rpx 25rpx;
    height: 100rpx;

    .icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10rpx;
    }

    .text {
      display: inline-block;
      vertical-align: middle;
    }

  }

  .grid-text {
    // font-size: 28rpx;
    margin-top: 4rpx;
    color: $u-type-info;
  }

  // ooooo
  .u-today {
    padding: 0 25rpx;
    // font-size: 24rpx;
    color: #333;
  }



  .u-today-header {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    padding: 0 25rpx;

    .u-today-text {
      font-size: 20rpx;
      color: #9F9F9F;
    }
  }

  .container_popup_text {
    margin: 30rpx;
    text-align: center;
  }
</style>